<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2020-11-04
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - 主页</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">


    <%--<link rel="shortcut icon" href="/favicon.ico">--%>
    <link href="<%=path%>/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/static/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet">
    <link href="<%=path%>/static/myTreeTable/module/treetable-lay/treetable.css" rel="stylesheet">

    <!--zTree-->
    <link href="<%=path%>/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
    <!--===========================-->
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">



<!--组织结构-->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-lg3">
            <!--内容开始-->
            <div  class="layui-fluid" style="margin-top: 15px;">
                <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
                    <div class="layui-card-body">
                                        <span class="pzright" style="display: flex;justify-content: flex-start;margin: 5px;">
                                            <p class="xm-d1-p2">
                                                <button class="layui-btn layui-btn-sm" id="btn-expand"
                                                        style="background-color: #1AB394;color: white;" onclick="city.expandAll(true)">全部展开</button>
                                                <button class="layui-btn layui-btn-sm" id="btn-fold"
                                                        style="background-color: #1AB394;color: white;" onclick="city.expandAll(false)">全部折叠</button>
                                           </p>
                                        </span>
                        <b>组织结构</b>
                        <ul id="userTree" class="ztree" style="width:230px; overflow:auto;"></ul>
                    </div>
                </div>
            </div>
            <!--内容结束-->
        </div>
        <div class="layui-col-lg9">
            <div  class="layui-fluid" style="margin-top: 15px;">
                <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-sm" id="addUser" style="background-color: #1AB394;color: white;">新增用户</button>
                        <table id="userTable" class="layui-table" lay-filter="userTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="<%=path%>/static/layui/layui.all.js"></script>
<script src="<%=path%>/static/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=path%>/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=path%>/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="<%=path%>/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="<%=path%>/static/js/plugins/layer/layer.min.js"></script>
<script src="<%=path%>/static/js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="<%=path%>/static/js/contabs.js"></script>
<script src="<%=path%>/static/js/plugins/pace/pace.min.js"></script>
<script src="<%=path%>/static/myjs/MyLayer.js"></script>
<!--ztree树-->
<!--<script src="/zTree_v3/js/jquery-1.4.4.min.js" type="application/javascript"></script>-->
<script src="<%=path%>/static/zTree_v3/js/jquery.ztree.all.min.js"></script>
<!--=================-->
<!--lay-event指定事件-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="stop" style="width:57px;height:22px;background-color:#1C84C6"><i class="layui-icon">&#x1006;</i>禁用</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="width:57px;height:22px"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width:57px;height:22px"><i class="fa fa-trash-o" aria-hidden="true"></i>删除</a>
</script>
<script>

    layui.use(['tree','table','layer'], function(){
        var tree = layui.tree;
        var table = layui.table;
        var layer = layui.layer;
        //监听工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'stop') {
                alert("禁用" + data.name);
            }
            if (layEvent === 'del') {
                alert('删除' + data.name);
            }
            if (layEvent === 'edit') {
                alert('修改' + data.name);
            }
        });


        //第一个实例
        table.render({
            elem: '#userTable'
            ,height: 312
            ,url: '<%=path%>/static/json/user.json' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'userNum', title: '工号', sort: true}
                ,{field: 'name', title: '姓名'}
                ,{field: 'post', title: '岗位'}
                ,{field: 'admin', title: '管理员权限'}
                ,{field: 'inputTime', title: '创建时间'}
                ,{field: 'state', title: '状态',
                    templet: function (data) {
                        let res1 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #1AB394;border-radius: 5px;display: inline-block;">正常</div>`;
                        let res2 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #ED5565;border-radius: 5px;display: inline-block;">停用</div>`;
                        return data.visible == 0 ? res1 : res2;
                    }}
                ,{fixed: 'operation', title: '操作', toolbar: '#barDemo',  fixed: 'right', width:250}
            ]]
        });

        $(function(){
            $("#addUser").click(function(){
                MyLayer.iframeLayer(layer,'添加用户',"<%=path%>/system/addUser")
            })

            var setting={
                check: {
                    enable: false,
                    chkStyle: "checkbox"//显示 checkbox 选择框，默认checkbox可选择值radio
                },
                callback:{
                    onClick: chooseNode,
                }
            };

            var zTreeNodes=[
                {"name":"北京","open":true,children:[
                        {"name":"东城区","id":2},
                        {"name":"朝阳区","id":3}
                    ]},//open:true表示默认展开
                {"name":"重庆","open":true,children:[
                        {"name":"巴南区",children:[
                                {"name":"南泉"},
                                {"name":"界石"}
                            ]},
                        {"name":"渝中区"}
                    ]}
            ];
            window.city = $.fn.zTree.init($("#userTree"), setting, zTreeNodes);
            //第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据
            <!--
                监听指定开关
                form.on('switch(switchTest)', function(data){
                    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
                });
            -->

        });

    });
    function chooseNode(event, treeId, treeNode){
        alert(treeNode.id+"///"+treeNode.name);

    }

</script>
</body>

</html>
